<template>
  <w-modal
    v-if="OAuth"
    ref="WModal"
    class="com-global-cate"
    width="800px"
    @hide="hide"
  >
    <div slot="title" class="cat-badge-header">
      游击队聊天室
      <span style="color: #00C48D">{{ clients.length }}人</span>
      <span class="w-hover-text">{{ OAuth.name }}</span>
    </div>
    <div class="cat-badge-content">
      <ul ref="messageList" class="message-list">
        <li v-for="item in dataArr" :key="item.date" class="item">
          <template v-if="item.userId === OAuth.userId">
            <p class="title title-self">
              <span class="date">{{ item.date | DateFormat }}</span>
              &nbsp;&nbsp;
              <span class="name">{{ item.visitorName }}</span>
              <span :style="$bgImage(item.icon)" class="icon w-image-fit" />
            </p>
            <div class="message-box message-box-self">
              <p class="message">
                {{ item.message }}
              </p>
            </div>
          </template>
          <template v-else>
            <p class="title">
              <span :style="$bgImage(item.icon)" class="icon w-image-fit" />
              <span class="name">{{ item.visitorName }}</span> &nbsp;&nbsp;
              <span class="date">{{ item.date | DateFormat }}</span>
            </p>
            <div class="message-box">
              <p class="message">
                {{ item.message }}
              </p>
            </div>
          </template>
        </li>
      </ul>
    </div>
    <div slot="footer" class="footer-box">
      <a-input
        v-model="inputText"
        :max-length="140"
        clearable
        allow-clear
        class="input"
        placeholder="请输入..."
        @press-enter="sendBtnClick"
      />
      <a-button class="send-btn" type="primary" @click="sendBtnClick">
        发送
      </a-button>
    </div>
  </w-modal>
</template>

<script lang="ts">
import io from 'socket.io-client'
import { Vue, Component } from 'vue-property-decorator'
import { State } from 'vuex-class'
import WModal, { ModalComType } from '@/components/global/modal'

@Component({
  name: 'ComGlobalChat',
  components: {
    WModal,
  }
})
export default class ComGlobalCate extends Vue {
  @State('oauth') OAuth: any;
  /**
   * 客户端数据量
   */
  clients = [];
  /**
   * 输入框的数据
   */
  inputText = '';
  /**
   * socket 客户端
   */
  socketClient: any = null;
  /**
   * 聊天数据
   */
  dataArr = [];

  get connected () {
    return this.socketClient ? this.socketClient.connected : false
  }

  beforeDestroy () {
    if (this.socketClient) {
      this.socketClient.close()
    }
  }

  /**
   * 显示聊天室
   */
  show () {
    (this.$refs.WModal as ModalComType).show()
    this.socketInit()
  }

  /**
   * 初始化数据
   */
  socketInit () {
    this.socketClient = io('/chat', {
      query: {
        room: 'WEB'
      }
    })
    // 链接成功后调用
    this.socketClient.on('connect', () => {
      console.log('连接成功')
    })
    // 断开连接
    this.socketClient.on('disconnect', () => {
      this.$message.info('WebSocket断开连接')
    })
    // 获取当前socket id
    this.socketClient.on('currentSocket', () => {})
    // 聊天人数改变的时候调用
    this.socketClient.on('numberChange', (data: any) => {
      this.clients = data.clients
    })
    // 接收到数据
    this.socketClient.on('message', (data: any) => {
      if (this.dataArr.length === 1000) {
        this.dataArr.shift()
      }
      this.dataArr.push(data as never)
      this.$nextTick(() => {
        (this.$refs.messageList as any).scrollTop = (this.$refs
          .messageList as any).scrollHeight
      })
    })
  }

  /**
   * 发送按钮点击
   */
  sendBtnClick () {
    if (!this.inputText || this.inputText === '\n') {
      this.$message.error('请输入数据')
      this.inputText = ''
      return
    }
    this.socketClient.emit('message', {
      message: this.inputText,
      visitorName: this.OAuth.name,
      userId: this.OAuth.userId,
      icon: this.OAuth.icon
    })
    this.inputText = ''
  }

  hide () {
    this.socketClient.close()
    this.socketClient = null
  }
}
</script>

<style scoped lang="less">
.com-global-cate {
  .footer-box {
    display: flex;
    .send-btn {
      margin-left: 15px;
    }
    .input {
      text-align: left;
    }
  }
  .cat-badge-header {
    font-size: 18px;
  }
  .cat-badge-content {
    height: calc(100vh - 256px);
    .message-list {
      padding-right: 10px;
      height: 100%;
      overflow: auto;
      .item {
        margin-bottom: 20px;
        .title {
          vertical-align: middle;
          position: relative;
          height: 35px;
          padding: 0 35px;
          .icon {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            border: 1px solid rgba(0, 0, 0, 0.3);
          }
          .name {
            font-size: 18px;
            color: #666;
          }
          .date {
            font-size: 14px;
            color: #999;
          }
        }
        .message-box {
          padding-top: 5px;
          padding-right: 200px;
          display: flex;
          .message {
            background-color: #abdcff;
            padding: 5px;
            border-radius: 6px;
            flex: 0 1 auto;
            word-break: break-word;
          }
        }
        .message-box-self {
          padding-right: 0px;
          padding-left: 200px;
          justify-content: flex-end;
        }
        .title-self {
          text-align: right;
          .icon {
            right: 0;
            left: auto;
          }
        }
      }
    }
  }
}
</style>
